<template>
  <div class="container">
    <div class="header-box">
      <h3><span>智能识别</span></h3>
      <el-row class="demo-form-inline">
        <el-col :span="10">
          <el-form :inline="true" :model="formInline">
            <el-form-item label="上传图片">
              <el-upload
                :auto-upload="false"
                class="avatar-uploader"
                :on-change="fileChange"
                action=""
                :show-file-list="false">
                <img v-if="isResult" src="/computer.jpeg" class="avatar">
                <div v-else-if="isLoading" class="el-icon-plus avatar-uploader-icon">
                  <div class="loading" v-loading="true" element-loading-text="拼命加载中"></div>
                </div>
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="14" class="result">
          <template v-if="isResult">
            <div class="result-title">
              识别结果
            </div>
            <div contenteditable="false" class="result-content">
              <p
                style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; color: rgb(67, 67, 107); line-height: 26px; word-break: break-word; font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 16px; letter-spacing: 0.5px;">
                基于您上传的图片内容描述，以下是对笔记本电脑图片特征的详细分析：</p>
              <ol
                style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;">
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p
                  style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;">
                  <span style="box-sizing: border-box; font-weight: bolder;">颜色特征</span>:</p>
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      主体颜色：银白色，这种颜色给人以现代、科技感。
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      屏幕颜色：黑色，关闭状态下的屏幕通常为黑色或深色调。
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      键盘颜色：灰白色键帽，与银白色机身形成对比，增加了视觉层次感。
                    </li>
                  </ul>
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p
                  style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;">
                  <span style="box-sizing: border-box; font-weight: bolder;">设计特征</span>:</p>
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      简约设计：整体设计没有多余的装饰，强调了功能性和现代感。
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      键盘布局：整齐排列的键帽表明了高效的输入体验和良好的使用感受。
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      无按钮或接口：右侧边缘和底部的简洁设计减少了操作复杂度，可能意味着更多的接口被设计在笔记本的其他侧面。
                    </li>
                  </ul>
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p
                  style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;">
                  <span style="box-sizing: border-box; font-weight: bolder;">附加配件特征</span>:</p>
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      银色托盘：位于电脑下方，可能是用于放置鼠标或其他电脑配件的，增加了使用的便利性。
                    </li>
                  </ul>
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p
                  style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;">
                  <span style="box-sizing: border-box; font-weight: bolder;">品牌与标识</span>:</p>
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      图片中未显示任何品牌标志或文字信息，这可能意味着品牌信息的低调处理，或者图片专注于展示产品本身而非品牌宣传。
                    </li>
                  </ul>
                </li>
                <li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p
                  style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;">
                  <span style="box-sizing: border-box; font-weight: bolder;">整体印象</span>:</p>
                  <ul
                    style="box-sizing: border-box; list-style: disc; padding: 0px; margin-block: 1em; padding-inline-start: 1.2em; font-size: 1rem; letter-spacing: 0.1rem; margin: 8px 0px;">
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      专业且高效：银白色的配色方案，结合简约的设计语言，传达出一种专业和高效的工作态度。
                    </li>
                    <li
                      style="box-sizing: border-box; list-style-position: inherit; list-style-image: initial; list-style-type: disc; margin: 0px; padding: 0px;">
                      美观与实用并重：设计不仅考虑了外观的吸引力，也重视了用户的实际使用体验。
                    </li>
                  </ul>
                </li>
              </ol>
              <p
                style="box-sizing: border-box; margin: 10px 0px 0px; padding: 0px; white-space-collapse: preserve; color: rgb(67, 67, 107); line-height: 26px; word-break: break-word; font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; font-size: 16px; letter-spacing: 0.5px;">
                综上所述，这张图像中的笔记本电脑以其简约而现代的设计，专业的外观以及考虑到用户体验的细节，展现了一款注重实用性和美观性的高科技产品。</p>
            </div>
            <div class="features-title">特征值</div>
            <div class="features-value">
              <el-tag size="small">银白色</el-tag>&nbsp;&nbsp;
              <el-tag size="small">黑色</el-tag>&nbsp;&nbsp;
              <el-tag size="small">灰白色键帽</el-tag>&nbsp;&nbsp;
              <el-tag size="small">银白色机身</el-tag>&nbsp;&nbsp;
              <el-tag size="small">键盘布局</el-tag>&nbsp;&nbsp;
              <el-tag size="small">银色托盘</el-tag>
            </div>
          </template>
        </el-col>
      </el-row>
      <el-divider v-if="isResult"/>
      <div class="bottom-content" v-if="isResult">
        <div>
          <el-tag
            key="label"
            effect="dark">
            聚类相似列表
          </el-tag>
        </div>
        <el-row class="table-content">
          <el-col :span="12">
            <el-table ref="singleTable" :data="tableData" border stripe size="mini" style="width: 100%"
                      @row-click="rowClick" :row-key="getRowKey"
                      :row-class-name="rowClassName"
                      highlight-current-row>
              <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
              <el-table-column prop="code" label="品种码" align="center" width="180"></el-table-column>
              <el-table-column prop="value" label="相似度" align="center" width="100"></el-table-column>
            </el-table>
          </el-col>
          <el-col :span="12" class="result">
            <div class="result-title">
              聚类结果
            </div>
            <div class="result-content result-content2">
              <div class="result-content-left">
                <img :src="selectRow.imgUrl" alt="">
              </div>
              <div class="result-content-right" v-html="selectRow.info" contenteditable="true"/>
            </div>
          </el-col>
        </el-row>
      </div>
      <el-divider v-if="showHist"/>
      <div class="bottom-content" v-if="showHist">
        <div>
          <el-tag
            key="label"
            effect="dark">
            识别历史记录
          </el-tag>
        </div>
        <el-row>
          <el-col :span="4" class="his-content">
            <img src="/computer.jpeg" @click="histClick"/>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
import {mapGetters} from 'vuex'
import de from "element-ui/src/locale/lang/de";

export default {
  name: 'picture',
  data() {
    return {
      value1: '',
      formInline: {
        user: '',
        region: ''
      },
      isResult: false,
      isLoading: false,
      showHist: false,
      imgUrl: '',
      clickId: 1,
      selectRow: {},
      tableData: [{
        id: 1,
        code: 'AC1073414',
        name: '笔记本电脑',
        value: '98.99',
        imgUrl: '/Magicbook-X15.png',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">显示屏</span>：荣耀MagicBook X 15配备了15.6英寸的IPS雾面屏，分辨率为1920x1080，具有178°广视角和250尼特的亮度。该屏幕还通过了莱茵低蓝光护眼认证与莱茵无频闪护眼认证，提供了87%的屏占比，旨在提供更舒适的视觉体验。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：荣耀MagicBook X 15提供了两种处理器选项：英特尔酷睿i3 10代系列（Intel Core i3 10110U）和英特尔酷睿i5 10代系列（Intel Core i5 10210U）。这两款处理器的主频分别为2.1GHz和1.6GHz，最高睿频可分别达到4.1GHz和4.2GHz。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">存储设备</span>：荣耀MagicBook X 15有两种内存容量配置：8GB DDR4 2666MHz，以及硬盘容量有256GB和512GB两种SSD固态硬盘（PCIe）可供选择。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">多媒体设备</span>：这款笔记本提供了720p HD摄像头（隐藏式）、内置音效芯片、内置双扬声器和内置双麦克风，满足用户的日常多媒体需求。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">网络通信</span>：荣耀MagicBook X 15支持802.11ac无线协议，支持双频（2.4GHz+5GHz），并配备蓝牙5.0模块，保障了良好的网络连接与数据传输能力。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">输入输出接口</span>：荣耀MagicBook X 15提供了1×USB 2.0、1×USB 3.0、1×USB 3.0 Type-C、HDMI及耳机/麦克风二合一接口等多种连接选项。</p></li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><p style="box-sizing: border-box; margin: 0px; padding: 0px; white-space-collapse: preserve; background-color: transparent; line-height: 26px; word-break: break-word;"><span style="box-sizing: border-box; font-weight: bolder;">电源描述</span>：荣耀MagicBook X 15搭载的是锂电池，容量为42瓦时，续航时间约为7小时。配备的电源适配器为100V-240V 65W自适应交流电源适配器</p></li></ol>'
      }, {
        id: 2,
        code: 'AC1335572',
        name: '华为笔记本电脑',
        value: '98.23',
        imgUrl: '/matebookD16.png',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">显示屏</span>：MateBook D 16 配备了16英寸的IPS屏，分辨率为1920x1200，具有178°广视角和300尼特亮度<span class="custom-footnote" data-index="4" style="box-sizing: border-box; background: url(&quot;https://openres.xfyun.cn/xfyundoc/2024-04-21/9a6ae90a-8c57-4672-b21a-dba98d4f5917/1713685044472/111.svg&quot;) center 0px / 100% no-repeat; color: rgb(255, 255, 255); cursor: pointer; display: inline-block; font-size: 12px; font-weight: 600; height: 11px; margin: 0px 1px; text-align: center; width: 9px;"></span>。这款屏幕还支持100% sRGB色域，为用户提供了良好的视觉体验。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：MateBook D 16提供了多种处理器选项，包括第13代英特尔酷睿i9-13900H、i7-13700H、i5-13500H及i5-13420H标压处理器。这些高性能处理器确保了设备能够处理多任务并行、高负载应用和专业级图形处理。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">存储设备</span>：MateBook D 16配置了1TB NVMe PCIe SSD，保证了足够的存储空间和快速的读写速度。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">多媒体设备</span>：MateBook D 16提供了高质量的音频和视频功能，包括100万像素前置摄像头和两个内置麦克风，以及配备双扬声器的系统，确保用户在视频会议和娱乐中的高质量音视频体验。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">网络连接</span>：MateBook D 16支持广泛的网络连接选项，包括Wi-Fi 6（802.11ax）和蓝牙5.1，确保快速可靠的无线连接。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">输入输出接口</span>：MateBook D 16提供了丰富的接口配置，包括USB-C 3.2 Gen 1、USB-A 3.2 Gen 1、HDMI和3.5毫米耳机接口，支持多种外设连接需求。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">电源描述</span>：MateBook D 16配备了56 Wh或70 Wh的锂聚合物电池，根据不同配置需求提供不同容量的电池选择，并支持65W多功能充电器。</li></ol>'
      }, {
        id: 3,
        code: 'AC3005934',
        name: '惠普计算机',
        value: '95.21',
        imgUrl: '/Pavilion-14-eh1032TU.jpg',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">显示屏</span>：惠普Pavilion 14-eh1032TU配备了14英寸的IPS屏幕，分辨率为2240x1400，具有16:10的屏幕比例和300尼特的亮度。这款显示屏还支持100% sRGB色域，提供更真实、生动的色彩表现。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：它搭载了第13代英特尔酷睿i5处理器i5-13500H，主频为2.5GHz，具备十二核心设计，能够提供强大的计算性能，适合多任务并行处理和高负载应用。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">存储设备</span>：惠普Pavilion 14-eh1032TU配置了16GB的LPDDR5内存和1TB的NVMe PCIe M.2固态硬盘。这种高速内存和SSD的组合确保了系统的快速响应和大量数据的高效存储。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">多媒体设备</span>：这款笔记本提供了集成的英特尔锐炬Xe显卡，虽然显存容量为共享系统内存，但足以应对日常的图形处理需求。同时，该设备还配备了一个支持摄像头和高质量的扬声器，满足用户的视频通话和娱乐需求。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">网络连接</span>：惠普Pavilion 14-eh1032TU支持Wi-Fi 6E和蓝牙5.3，保证了设备的快速无线连接和数据传输。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">输入输出接口</span>：该款笔记本提供了多种输入输出接口，包括USB Type-C、USB 3.2 Gen 1、HDMI等，方便外部设备的连接。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">电源描述</span>：惠普Pavilion 14-eh1032TU配备了56 Wh的锂聚合物电池，并支持65W多功能充电器。这种配置在保证续航能力的同时，也提供了快速充电的功能。</li></ol>'
      }, {
        id: 4,
        code: 'AC1141108',
        name: '便携式计算机(13英寸)',
        value: '94.89',
        imgUrl: '/MateBook-13.jpg',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">外观设计</span>：MateBook 13具有尺寸为286毫米宽、211毫米深、14.9毫米高，重量大约为1.3千克，这使得它非常适合携带出行，尤其适合需要频繁移动的商务人士或学生。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">屏幕效果</span>：这款笔记本配备了13英寸的IPS屏，分辨率为2160x1440，具有300尼特的亮度和100% sRGB广色域，提供清晰且色彩准确的视觉体验。其88%的高屏占比和四面窄边框设计进一步提升了用户的观感。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">性能方面</span>：MateBook 13搭载第11代英特尔酷睿处理器，主流配置包括i5-1135G7和i7-1165G7，并配有16GB DDR4双通道内存及512GB NVMe PCIe SSD。这些硬件配置保证了系统运行的流畅性和数据读写速度。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">图形表现</span>：配备NVIDIA GeForce MX450独立显卡及Intel Iris Xe Graphics集成显卡，使其能够应对日常办公、图像处理以及轻度娱乐需求。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">连接选项</span>：网络连接包含WLAN（支持802.11ax无线协议，双频2.4GHz+5GHz）和蓝牙5.1，接口有USB 3.2 Gen1、USB-C等多种选择。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">其它元素</span>：MateBook 13还具备一些特色应用如华为分享、华为电脑管家等，提升了用户体验。</li></ol>'
      }, {
        id: 5,
        code: 'AC1092522',
        name: '联想计算机',
        value: '94.38',
        imgUrl: '/ThinkPad-P14S-2.png',
        info: '<ol style="box-sizing: border-box; margin-block-start: 1em; padding-inline-start: 2.3em; font-size: 16px; margin: 8px 0px; color: rgb(67, 67, 107); font-family: -apple-system, &quot;system-ui&quot;, &quot;Segoe UI&quot;, Roboto, &quot;Helvetica Neue&quot;, Arial, &quot;Noto Sans&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;, &quot;Segoe UI Symbol&quot;, &quot;Noto Color Emoji&quot;; letter-spacing: 0.5px;"><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">处理器</span>：ThinkPad P14S 配备了第12代英特尔酷睿i7处理器和4G独立显卡，提供了强大的处理能力，适合高强度的工作负载。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">内存 (RAM)</span>：这款笔记本配备了16GB的DDR4 2666MHz内存，能提供足够的多任务处理能力和数据缓存速度。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">存储 (硬盘)</span>：内置512GB的SSD固态硬盘，保证了快速的系统启动和数据读写速度，有效提升工作效率。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">显示屏</span>：它拥有14英寸1920x1080分辨率的IPS屏幕，LED背光，并支持100% sRGB色域，可为用户提供清晰且色彩准确的视觉体验。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">显卡</span>：搭载4G独立显卡，适合处理图形密集型的工作，如3D建模和视频编辑。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">重量</span>：该机型重量仅为1.3kg，便于携带，适合需要经常移动的商务人士。</li><li style="box-sizing: border-box; list-style: decimal; margin: 0px; padding: 0px;"><span style="box-sizing: border-box; font-weight: bolder;">网络连接</span>：支持802.11ax无线协议，双频（2.4GHz+5GHz），保证了良好的网络连接速度和稳定性。</li></ol>'
      }]
    }
  },
  methods: {
    fileChange(file, fileList) {
      this.isLoading = true
      setTimeout(() => {
        this.showResult()
        sessionStorage.setItem('picture-result', '1')
        this.showHist = true
      }, 1000)
    },
    rowClick(row) {
      this.clickId = row.id
      this.selectRow = row
      this.$refs.singleTable.setCurrentRow(row)
    },
    getRowKey(row) {
      return row.id
    },
    rowClassName(data) {
      if (data.row.id === this.clickId) {
        return 'current-row'
      }
    },
    histClick() {
      this.showResult()
    },
    showResult() {
      this.imgUrl = '/computer.jpeg'
      this.isResult = true
      this.isLoading = false
    }
  },
  mounted() {
    this.selectRow = this.tableData[0]
    this.showHist = sessionStorage.getItem('picture-result') === '1'
  }
}

</script>
<style lang="scss">

</style>
<style lang="scss" scoped>

.container {
  .header-box {
    height: auto !important;
    min-height: calc(100vh - 60px) !important;
  }
}

.play-box {
  img {
    display: inline-block;
    width: 15px;
    margin: 0 5px;
  }
}

.demo-form-inline {
  padding: 10px;
  height: 300px;
  width: 100%;
}

.title {
  .title-left {
    float: left;
  }

  .title-right {
    float: right;
  }
}

.result {
  height: 100%;
  padding-left: 10px;
}

.result-title {
  font-size: 16px;
  font-weight: bold;
  color: #144a74;
  padding-bottom: 10px;
}

.features-title {
  font-size: 16px;
  font-weight: bold;
  color: #144a74;
  padding: 10px 0;
  text-align: center;
}

.result-content {
  height: calc(100% - 110px);
  width: 100%;
  border: solid 1px #DCDFE6;
  overflow: auto;
  padding: 10px;
}

.result-content2 {
  height: calc(100% - 17px);
}

.result-content-left {
  float: left;
  width: 200px;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;

  img {
    max-width: 200px;
    max-height: 100%;
  }
}

.result-content-right {
  float: right;
  width: calc(100% - 200px);
  height: 100%;
  padding-left: 10px;
  overflow: auto;
}

.features-value {
  width: 100%;
  border: solid 1px #DCDFE6;
  margin-bottom: 10px;
  font-size: 16px;
  line-height: 32px;
  text-align: center;
}

.bottom-content {
  padding: 10px;
}

.table-content {
  padding-top: 10px;
  height: 215px;
}

.loading {
  width: 100%;
  height: 100%;
  position: absolute;
  top: -40%;

  .el-loading-mask .el-loading-spinner {
    top: 0 !important;
  }
}

.his-content {
  height: 200px;
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    max-width: 80%;
    max-height: 80%;
    cursor: pointer;
  }

  img:hover {
    border: solid 1px #DCDFE6;
  }
}
</style>
<style>

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 320px;
  height: 240px;
  line-height: 240px;
  text-align: center;
}

.avatar {
  width: 320px;
  height: 240px;
  display: block;
}
</style>
